<template>
  <div class="home">
    <header>商品列表</header>
    <ul>
      <li
        v-for="(item, index) in goods"
        :key="index"
        :class="{ active: checkIndex == index }"
        @click="checkIndex = index"
      >
        {{ item.name }}
      </li>
    </ul>
    <ol v-if="goods.length">
      <li v-for="(item, index) in goods[checkIndex].child" :key="index">
        <img src="../assets/img.png" alt="" />
        <section>
          <h4>{{ item.name }}</h4>
          <p style="color:#8d3ec5">￥{{ item.price }}</p>
          <div>
            <span>{{ item.payNum }}人付款</span>
            <button @click="jump(item)">+</button>
          </div>
        </section>
      </li>
    </ol>
  </div>
</template>

<script>
// @ is an alias to /src
import { mapActions, mapState,mapMutations } from "vuex";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      checkIndex: 0,
    };
  },
  computed: {
    ...mapState(["goods"]),
  },
  created() {
    this.getGoods();
    console.log(this.goods);
  },
  methods: {
    ...mapActions(["getGoods"]),
    ...mapMutations(['addCart']),
    jump(val){
      this.addCart(val);
      this.$router.push('/about'); // 跳转购物车页面
    }
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100%;
  background: #e9e9e9;
}
header {
  height: 50px;
  line-height: 50px;
  text-align: center;
}
ul {
  display: flex;
  height: 45px;
  color: #fff;
  li {
    height: 100%;
    width: 20%;
    text-align: center;
    line-height: 45px;
    background: #440f7d;
  }
  .active {
    background: #8d3ec5;
  }
}
ol {
  li {
    padding: 10px 15px;
    box-sizing: border-box;
    margin-top: 15px;
    display: flex;
    background: #fff;
    img {
      width: 80px;
      margin-right: 10px;
    }
    section {
      flex: 1;
      div{
        display: flex;
        justify-content: space-between;
        button{
          border: none;
          background: #8c3ec4;
          color: #fff;
          padding: 3px 10px;
          border-radius: 15px;
        }
      }
    }
  }
}
</style>
